<template>
  <div class="app-container">
    <!-- 搜索框 -->
    <div class="search-container">
      <div class="input-box">
        <el-input v-model="searchKey" placeholder="请输入内容"></el-input>
        <el-button type="primary" icon="el-icon-search" class="btn" @click="search">搜索</el-button>
      </div>
    </div>

    <el-divider></el-divider>
    <div class="filter-panel">
      <el-form>
        <el-form-item label="地区：">
          <el-radio-group v-model="form.areaId">
            <el-radio :label="item.areaId" v-for="item in areas" :key="item.areaId">{{ item.areaName }}</el-radio>
            <!-- <el-radio label="线下场地免费"></el-radio> -->
          </el-radio-group>
        </el-form-item>
        <el-form-item label="类别：">
          <el-radio-group v-model="form.attrCateId">
            <el-radio :label="item.cateId" v-for="item in attrTypes" :key="item.cateId">{{ item.cateName }}</el-radio>
            <!-- <el-radio label="线下场地免费"></el-radio> -->
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
    <!-- 信息列表 -->
    <div class="search-list">
      <AttractionList :searchKey="searchKey" :isSearch.sync="isSearch" :searchForm="form" />
      <div class="recom-attr-list" v-show="this.token">
        <h3 class="hd">猜你喜欢</h3>
        <RecomAttr />
      </div>
    </div>
  </div>
</template>
 
<script>
import AttractionList from '@/components/travel/attractionList'
import RecomAttr from '@/components/travel/recomAttr'
import { getAllAreas, getAllCates } from '@/api/travel'
import { mapGetters } from 'vuex'

export default {
  name: 'Travel',
  components: {
    AttractionList,
    RecomAttr
  },
  computed: {
        ...mapGetters([
            'token'
        ])
    },
  created() {
    getAllAreas().then(res => {
      const { areas } = res.data
      this.areas = areas
    })
    getAllCates().then(res => {
      const { attrTypes } = res.data
      this.attrTypes = attrTypes
    })

  },
  data() {
    return {
      searchKey: '',
      isSearch: false,
      form: {},
      areas: [],
      attrTypes: []
    }
  },
  methods: {
    search() {
      console.log('触发搜索。。。')
      this.isSearch = true
      // this.$store.commit('travel/SET_IS_SEARCH', true)
    }
  }
}
</script>
 
<style lang="less" scoped>
/deep/ .el-radio__input.is-checked .el-radio__inner {
  border-color: goldenrod;
  background: goldenrod;

}

/deep/ .el-radio__input.is-checked+.el-radio__label {
  color: goldenrod;
}

.app-container {
  width: 1000px;
  margin: 0 auto;

  .search-container {
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;

    .input-box {
      width: 670px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 3px solid goldenrod;

      /deep/ .el-input__inner {
        height: 40px;
        border-color: #ffd04b;
        border-radius: none;
        border: none;
      }

      /deep/ .el-button {
        height: 40px;
        border-radius: 0px;
        border: none;
      }

      .el-button--primary {
        background-color: goldenrod;
        border-color: goldenrod;

      }
    }

  }

  .filter-panel {
    margin-top: -25px;
    width: 1000px;

    .el-form-item {
      margin-bottom: 0px;
    }

    /deep/ .el-form-item__label {
      padding: 1px 12px 0px 13px;
      font-size: 12px;
    }

    .el-radio {
      margin-right: 10px;
    }

    /deep/ .el-form-item__content {
      border: 1px solid #ccc;
      font-size: 12px;
    }

    /deep/ .el-radio__label {
      font-size: 12px;
    }
  }

  .search-list {
    display: flex;
    justify-content: space-between;

    .recom-attr-list {
      width: 260px;

      .hd {
        display: block;
        height: 30px;
        // line-height: 20px;
        margin-bottom: 18px;
        font-size: 18px;
        color: #333;
        font-weight: normal;
        border-bottom: 1px solid #ff9d00;
      }
    }
  }

  // .search-list {

  // }

}
</style>